<template>
    <!-- 内容页 - 固定尺寸960x600像素画布 vpn -->
    <div class="absolute bg-gradient-to-br from-emerald-800 via-green-700 to-teal-600 w-full h-full overflow-hidden">
      
      <!-- 装饰元素：左上角圆形 -->
      <div class="absolute rounded-full bg-white/5 w-64 h-64" style="left: -32px; top: -32px;"></div>
      
      <!-- 装饰元素：右下角圆形 -->
      <div class="absolute rounded-full bg-white/5 w-80 h-80" style="right: -40px; bottom: -40px;"></div>
      
      <!-- 页面标题 -->
      <div class="absolute" style="left: 15px; top: 8px;">
        <h2 element-id="page-title" class="text-2xl font-semibold text-white">从小习惯开始改变</h2>
        <div class="absolute bg-gradient-to-r from-emerald-400/70 via-emerald-400/70 to-transparent h-px w-40" style="left: 0; top: 36px;"></div>
      </div>
      
      <!-- 内容区域 -->
      <div class="absolute" style="left: 40px; top: 80px; width: 880px; height: 480px;">
        <!-- 左侧：习惯养成图表 -->
        <div class="absolute bg-white/90 rounded-lg shadow-md" style="left: 0; top: 0; width: 420px; height: 380px;">
          <div class="absolute" style="left: 0; top: 0; width: 100%; height: 100%;">
            <Lines 
              :data="[{ 'name': '效率提升', 'data': [30, 45, 55, 65, 75, 85] }]" 
              :column="['第1周', '第2周', '第3周', '第4周', '第5周', '第6周']" 
              class="absolute"
              style="left: 0; top: 0; width: 100%; height: 100%;"
            />
          </div>
          <div class="absolute text-center text-emerald-800 font-semibold" style="left: 0; top: 20px; width: 100%;">
            小习惯坚持带来的效率提升（%）
          </div>
        </div>
        
        <!-- 右侧：三个习惯卡片 -->
        <div class="absolute" style="right: 0; top: 0; width: 420px; height: 380px;">
          <!-- 习惯1：晨间仪式 -->
          <div class="absolute bg-white/90 rounded-lg shadow-md p-6" style="right: 0; top: 0; width: 100%; height: 120px;">
            <div class="absolute" style="left: 20px; top: 15px; width: 380px;">
              <h3 element-id="habit1-title" class="text-xl font-semibold text-emerald-700">晨间仪式</h3>
              <p element-id="habit1-desc" class="mt-2 text-gray-700 leading-6">
                利用早晨高效时段完成重要任务，为一天设定积极基调。
              </p>
            </div>
            <!-- 装饰：太阳图标 -->
            <div class="absolute rounded-full bg-amber-100 flex items-center justify-center" style="right: 20px; top: 15px; width: 40px; height: 40px;">
              <div class="absolute rounded-full bg-amber-500" style="width: 16px; height: 16px;"></div>
              <div class="absolute bg-amber-500" style="width: 2px; height: 6px; top: -8px; left: 19px;"></div>
              <div class="absolute bg-amber-500" style="width: 2px; height: 6px; top: 42px; left: 19px;"></div>
              <div class="absolute bg-amber-500" style="width: 6px; height: 2px; top: 19px; left: -8px;"></div>
              <div class="absolute bg-amber-500" style="width: 6px; height: 2px; top: 19px; left: 42px;"></div>
            </div>
          </div>
          
          <!-- 习惯2：定期回顾与调整 -->
          <div class="absolute bg-white/90 rounded-lg shadow-md p-6" style="right: 0; top: 130px; width: 100%; height: 120px;">
            <div class="absolute" style="left: 20px; top: 15px; width: 380px;">
              <h3 element-id="habit2-title" class="text-xl font-semibold text-emerald-700">定期回顾与调整</h3>
              <p element-id="habit2-desc" class="mt-2 text-gray-700 leading-6">
                每周回顾时间使用情况，识别浪费点并持续优化管理系统。
              </p>
            </div>
            <!-- 装饰：图表图标 -->
            <div class="absolute rounded-full bg-blue-100 flex items-center justify-center" style="right: 20px; top: 15px; width: 40px; height: 40px;">
              <div class="absolute bg-blue-600" style="width: 4px; height: 10px; bottom: 12px; left: 12px;"></div>
              <div class="absolute bg-blue-600" style="width: 4px; height: 14px; bottom: 12px; left: 18px;"></div>
              <div class="absolute bg-blue-600" style="width: 4px; height: 18px; bottom: 12px; left: 24px;"></div>
            </div>
          </div>
          
          <!-- 习惯3：适当休息与自我奖励 -->
          <div class="absolute bg-white/90 rounded-lg shadow-md p-6" style="right: 0; top: 260px; width: 100%; height: 120px;">
            <div class="absolute" style="left: 20px; top: 15px; width: 380px;">
              <h3 element-id="habit3-title" class="text-xl font-semibold text-emerald-700">适当休息与自我奖励</h3>
              <p element-id="habit3-desc" class="mt-2 text-gray-700 leading-6">
                认识到休息也是提高效率的必要环节，建立健康的工作与生活平衡。
              </p>
            </div>
            <!-- 装饰：礼物图标 -->
            <div class="absolute rounded-full bg-purple-100 flex items-center justify-center" style="right: 20px; top: 15px; width: 40px; height: 40px;">
              <div class="absolute border-2 border-purple-600 rounded-sm" style="width: 16px; height: 16px;"></div>
              <div class="absolute bg-purple-600" style="width: 2px; height: 6px; top: -4px; left: 19px;"></div>
              <div class="absolute bg-purple-600" style="width: 10px; height: 2px; top: 19px;"></div>
            </div>
          </div>
        </div>
        
        <!-- 底部：习惯养成时间表 -->
        <div class="absolute bg-white/90 rounded-lg shadow-md p-4" style="left: 0; bottom: 0; width: 880px; height: 80px;">
          <div class="absolute" style="left: 20px; top: 15px; width: 840px;">
            <h3 class="text-lg font-semibold text-emerald-800">习惯养成时间表</h3>
            <div class="absolute" style="left: 0; top: 30px; width: 100%; display: flex; justify-content: space-between;">
              <div class="flex items-center">
                <div class="rounded-full bg-emerald-500 text-white text-xs font-bold flex items-center justify-center" style="width: 24px; height: 24px;">1</div>
                <span class="ml-2 text-gray-700">开始尝试<span class="text-xs text-gray-500">（1-7天）</span></span>
              </div>
              <div class="flex items-center">
                <div class="rounded-full bg-emerald-500 text-white text-xs font-bold flex items-center justify-center" style="width: 24px; height: 24px;">2</div>
                <span class="ml-2 text-gray-700">坚持执行<span class="text-xs text-gray-500">（8-21天）</span></span>
              </div>
              <div class="flex items-center">
                <div class="rounded-full bg-emerald-500 text-white text-xs font-bold flex items-center justify-center" style="width: 24px; height: 24px;">3</div>
                <span class="ml-2 text-gray-700">习惯形成<span class="text-xs text-gray-500">（22-66天）</span></span>
              </div>
              <div class="flex items-center">
                <div class="rounded-full bg-emerald-500 text-white text-xs font-bold flex items-center justify-center" style="width: 24px; height: 24px;">4</div>
                <span class="ml-2 text-gray-700">自然而然<span class="text-xs text-gray-500">（67天以上）</span></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 装饰元素：小圆点 -->
      <div class="absolute rounded-full bg-emerald-400/30 w-4 h-4" style="left: 160px; top: 50px;"></div>
      <div class="absolute rounded-full bg-emerald-400/30 w-3 h-3" style="right: 180px; top: 40px;"></div>
      
      <!-- 装饰元素：连接线 -->
      <div class="absolute" style="left: 300px; top: 40px;">
        <div class="absolute bg-emerald-400/20" style="width: 1px; height: 10px;"></div>
        <div class="absolute bg-emerald-400/20" style="top: 10px; width: 10px; height: 1px;"></div>
      </div>
      
      <!-- 页脚 -->
      <div class="absolute text-white/60 text-xs" style="left: 20px; bottom: 20px;">
        高效时间管理：提升生活品质的关键
      </div>
    </div>
  </template>